<!-- data -->
<div class="panel panel-default" style="margin-top: 20px">
    <div class="panel-body">
        <table id="table" data-toggle="table" data-unique-id="id" data-show-columns="true" data-show-refresh="true"
            data-show-toggle="true" data-search="true" data-search-on-enter-key="true" data-pagination="true"
            data-side-pagination="server" data-page-list="[10, 25, 50, 100]" data-total-field="totalElements"
            data-data-field="content" data-url="/api/scheduleJob" data-query-params="queryParams" data-data-type="text"
            data-response-handler="responseHandler">
        </table>
    </div>
</div>
<script>
    operateEvents = {
        'click .remove': function (e, value, row, index) {
            const id = row.id
            Swal.fire({
                title: '警告',
                text: "删除之后无法恢复",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: '坚持删除',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: "DELETE",
                        url: "/api/scheduleJob/" + id,
                        dataType: "json",
                        success: function (result) {
                            if (result.success) {
                                toastr.success('删除成功')
                                $('#table').bootstrapTable('refresh')
                            } else {
                                toastr.error(result.message)
                            }
                        }
                    })
                }
            })
        }
    }

    $('#table').bootstrapTable({
        locale: 'zh-CN',
        columns: [{
            field: 'id',
            title: 'ID'
        }, {
            field: 'jobId',
            title: '任务ID'
        }, {
            field: 'cron',
            title: 'cron表达式',
            editable: {
                type: 'text',
                title: 'ScanWeight'
            }
        }, {
            field: 'beanName',
            title: 'bean名称'
        }, {
            field: 'description',
            title: '描述',
            editable: {
                type: 'text',
                title: 'ScanWeight'
            }
        }, {
            field: 'createAt',
            title: '创建时间'
        }, {
            field: 'updateAt',
            title: '更新时间'
        }, {
            field: 'operate',
            title: '操作',
            events: operateEvents,
            formatter: operateFormatter
        }],
        onEditableSave: function (field, row, oldValue, $el) {
            const data = Object.assign({}, row)
            delete data.jobId
            delete data.beanName
            delete data.createAt
            delete data.updateAt
            $.ajax({
                type: "PUT",
                url: "/api/scheduleJob",
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(data),
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        toastr.success('更新成功')
                    } else {
                        toastr.error(result.message)
                        // 恢复原始值
                        row[field] = oldValue
                        $('#table').bootstrapTable('updateByUniqueId', {
                            id: row.id,
                            row: row
                        })
                    }
                }
            })
        }
    })

    function queryParams(params) {
        if (params.search) {
            params.jobId = params.search
        }
        params.page = params.offset / params.limit
        params.size = params.limit
        params.sort = 'createAt,desc'
        delete params.search
        delete params.offset
        delete params.limit
        delete params.order
        return params
    }

    function responseHandler(result) {
        const resp = JSON.parse(result)
        if (resp.success) {
            const data = resp.data
            return data
        }
        return { content: [], totalElements: 0 }
    }

    function operateFormatter(value, row, index) {
        return [
            '<a class="remove" title="Remove">',
            '<i class="fa fa-trash"></i>',
            '</a>'
        ].join('')
    }

    // 新增按钮
    $('.bootstrap-table > .fixed-table-toolbar > .btn-group').prepend(
        [
            '<button class="btn btn-default" data-toggle="modal" data-target="#addModal">',
            '<i class="fa fa-plus"></i>',
            '</button>'
        ].join('')
    )
</script>

<!-- 新增 -->
<div id="addModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="add-form-jobId">名称</label>
                        <input id="add-form-jobId" class="form-control" placeholder="输入任务ID">
                    </div>
                    <div class="form-group">
                        <label for="add-form-cron">cron表达式</label>
                        <input id="add-form-cron" class="form-control" placeholder="输入cron表达式">
                    </div>
                    <div class="form-group">
                        <label for="add-form-description">描述</label>
                        <textarea id="add-form-description" class="form-control" placeholder="输入描述" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="add-form-submit" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    $('#add-form-submit').on('click', function () {
        const jobId = $('#add-form-jobId').val()
        const cron = $('#add-form-cron').val()
        const description = $('#add-form-description').val()
        const data = { jobId: jobId, cron: cron, description: description, beanName: 'defaultJob' }
        $.ajax({
            type: "POST",
            url: "/api/scheduleJob",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(data),
            dataType: "json",
            success: function (result) {
                if (result.success) {
                    toastr.success('新增成功')
                    $('#table').bootstrapTable('refresh')
                } else {
                    toastr.error(result.message)
                }
                $('#addModal').modal('hide')
            }
        })
    })
</script>